<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getPointListFn" top="40rpx">
      <view v-for="(item, index) in pointList" :key="index" class="sidebar-margin card-template  mb-[var(--top-m)]">
        <template v-if="unitType == 0">
          <view class="flex justify-between	mb-[20rpx]">
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">当前体重:
              <text class="price-font"> {{ item.weight }}</text>
              KG
            </view>
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">累计减重:
              <text class="price-font">{{ item.subtractWeight }}</text>
              KG
            </view>
          </view>
          <view class="flex justify-between	">
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">环比变化:
              <text class="price-font"> {{ item.reachRate }}</text>
              KG
            </view>
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">时间:
              <text class="price-font">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
            </view>
          </view>
        </template>
        <template v-if="unitType == 1">
          <view class="flex justify-between	mb-[20rpx]">
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">当前体重:
              <text class="price-font"> {{ item.weight * 2 }}</text>
              斤
            </view>
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">累计减重:
              <text class="price-font">{{ item.subtractWeight * 2 }}</text>
              斤
            </view>
          </view>
          <view class="flex justify-between	">
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">环比变化:
              <text class="price-font"> {{ item.reachRate * 2 }}</text>
              斤
            </view>
            <view class="text-[28rpx] text-[var(--text-color-light6)] mb-[10rpx] leading-[34rpx]">时间:
              <text class="price-font">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
            </view>
          </view>
        </template>
      </view>
      <mescroll-empty :option="{ tip: '暂无体重记录' }" v-if="!pointList.length && loading"></mescroll-empty>
    </mescroll-body>
    <!-- 时间选择 -->
    <select-date ref="selectDateRef" @confirm="confirmFn" />
  </view>
  <!-- 水印 -->
  <watermark></watermark>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
import { bodyFlatRecordList } from '@/app/api/member';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
import selectDate from '@/components/select-date/select-date.vue';
import { timeFormat } from '@/utils/formatting';
import useMemberStore from '@/stores/member';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const from_type = ref('');
const from_type_name = ref('')
const amount_type = ref('all');
const create_time = ref([])
const pointList = ref<Array<any>>([]);
const loading = ref<boolean>(false);
const typeList = ref([
  { name: '全部', status: 'all' },
  // { name: '收入', status: 'true' },
  // { name: '支出', status: 'false' }
])
const memberStore = useMemberStore()
const unitType = ref(0)
const info = computed(() => {
  // 装修模式

  return memberStore.info;
})
onShow(() => {
  unitType.value = uni.getStorageSync('weightUnitType')
  if (unitType.value == 0) {
    info.value.unit = 'KG';
  } else {
    info.value.unit = '斤';
  }
})
const getPointListFn = (mescroll: any) => {
  loading.value = false;
  let params = {
    userId: undefined
  }
  // 接口处统一赋值选择的会员ID了 所以传undefined
  bodyFlatRecordList(params).then((res: any) => {
    let newArr = res.data;
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    // if (mescroll.num == 1) {
    //   pointList.value = []; //如果是第一页需手动制空列表
    // }
    pointList.value = newArr;

    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}


// getPointTypeFn()
// 关键词搜索条件搜索
const typePopup = ref(false)
const searchTypeFn = (index: string = '', item: any = {}) => {
  from_type.value = index
  from_type_name.value = item.name
  typePopup.value = false
  pointList.value = [];
  getMescroll().resetUpScroll();
}
// 类型搜索
const loadTypeFn = (type: string) => {
  amount_type.value = type;
  pointList.value = [];
  getMescroll().resetUpScroll();
}

//日期筛选
const selectDateRef = ref()
const handleSelect = () => {
  selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
  create_time.value = data;
  pointList.value = []
  getMescroll().resetUpScroll();
}
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
  top: 86rpx !important;
}
</style>
